<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<html lang="en">

	<head>
		<title>Free Education Template by Colorlib</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link href="https://fonts.googleapis.com/css?family=Rubik:300,400,500" rel="stylesheet">
		<link rel="stylesheet" href="css/bootstrap.css">
		<link rel="stylesheet" href="css/animate.css">
		<link rel="stylesheet" href="css/owl.carousel.min.css">
		<link rel="stylesheet" href="fonts/ionicons/css/ionicons.min.css">
		<link rel="stylesheet" href="fonts/fontawesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
		<link rel="stylesheet" href="../WebTools/DB/comments.css" />

		<!-- Theme Style -->
		<link rel="stylesheet" href="css/style.css">
	</head>

	<body>

		<header role="banner" id="header" style="position: fixed;">
			<nav class="navbar navbar-expand-lg navbar-light bg-light">
				<div class="container-fluid">
					<img src="images/logo.jpg" width="109px" height="78px">
					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#entireNavbar" aria-controls="entireNavbar" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
					</button>
					<div class="collapse navbar-collapse navbar-light" id="entireNavbar">
						<ul class="navbar-nav ">
							<li class="nav-item">
								<a class="nav-link active" href="index2.jsp">首页</a>
							</li>
							<li class="nav-item dropdown">
								<a class="nav-link dropdown-toggle" href="courses.jsp" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">课程</a>
								<div class="dropdown-menu" aria-labelledby="dropdown04" id="tabdiv">
									<!-- <a class="dropdown-item" href="courses.html">HTML</a>
									<a class="dropdown-item" href="courses.html">WordPress</a>
									<a class="dropdown-item" href="courses.html">Laravel</a>
									<a class="dropdown-item" href="courses.html">JavaScript</a>
									<a class="dropdown-item" href="courses.html">Python</a> -->
								</div>

							</li>

							<li class="nav-item">
								<a class="nav-link" href="#" id="PersonalCenter">个人中心</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="about.jsp">关于</a>
							</li>

						</ul>
						<ul class="navbar-nav absolute-right" id="status1">
							<img class="rounded-circle mt-3" src="images/2.png" width="50" height="50" id="image" />
							<li class="dropdown">
								<a class="nav-link dropdown-toggle">${sessionScope.name}</a>
								<div class="dropdown-menu" aria-labelledby="dropdown05">
									<a href="PersonalCenter.jsp" class="dropdown-item">个人中心</a>
									<a href="${pageContext.request.contextPath}/AccountLoginAndLogout?op=exit" class="dropdown-item" href="#">退出登录</a>
								</div>
							</li>
						</ul>
						<ul class="navbar-nav absolute-right" id="status2">
							<li>
								<a href="login.jsp">登录</a> /
								<a href="register.jsp">注册</a>
							</li>

						</ul>
					</div>
				</div>
			</nav>
		</header>

		<div class="pt-4 bg-light element-animate" id="pageBody">

			<div class="container">
				<div class="container-fluid mb-4">
					<div id="courseTitlePanel">
						<h2 class="heading display-4" id="courseTitle">《》</h2>

					</div>
				</div>
				<div class="row">

					<div class="col-md-6 col-lg-8 order-md-2 mb-5">
						<div class="row">
							<div class="col-md-12">
								<h3 class="heading" id="videoTitle">暂无视频</h3>
								<video style="width: 100%;" controls="controls" controlslist="nodownload" id="playingVideo">
									<source src="" type="video/mp4"></source>
									<source src="" type="video/ogg"></source>
									<source src="" type="video/webm"></source>
									<source src="" type="video/x-ms-wmv"></source>
									<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
											<param name="movie" value="myvideo.swf" />
											<param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
										</object> 当前浏览器不支持 video直接播放，点击这里下载视频：
									<a href="myvideo.webm">下载视频</a>
								</video>
							</div>
						</div>

						<section class="episodes">

							<div class="container">
								<div class="row mb-3">
									<div class="col-md-12 pt-2" id="courseIntrodu">
									</div>
								</div>
							</div>

							<div class="container">
								<div class="row">
									<div class="col-md-12 mb-2">
										<h2>所有课程</h2>
									</div>
								</div>
								<div id="lessonsPanel">
									<p>暂无课程</p>
									<!--<div class="row bg-light align-items-center p-4 episode">
										<div class="col-md-10">
											<p class="meta">Episode 1
												<a href="#">Runtime 2:53</a>
											</p>
											<h2><a href="#">Some Title Here For The Video</a></h2>
											<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, fugit!</p>
										</div>
										<div class="col-md-2 text-center">
											<a href="#" class="play"><span class="ion-ios-play"></span></a>
										</div>
									</div>-->
								</div>
								<div class="row mb-3 mt-3">
									<div class="col-md-12 text-center">
										<div class="block-27" id="showPage">
										</div>
									</div>
								</div>
							</div>
							<h4 class="container">课程评论</h4>
							<div class="container e-comment-group">

							</div>
						</section>
					</div>
					<!-- END content -->
					<div class="col-md-6 col-lg-4 order-md-1">

						<div class="block-26 w-100">
							<h3 class="heading">关键词</h3>
							<ul id="tabList">
								<li>暂无关键词</li>
							</ul>
						</div>
						<div class="block-28 text-center mb-5" id="teacherInfoPanel">
							<figure>
								<img src="images/person_3.jpg" alt="" class="img-fluid">
							</figure>
							<h2 class="heading">佚名</h2>
							<p>
								<a href="#" class="fa fa-weibo p-2"></a>
								<a href="#" class="fa fa-instagram p-2"></a>
								<a href="#" class="fa fa-twitter p-2"></a>
							</p>
							<p>暂无简介</p>

						</div>

						<div class="block-25 mb-5">
							<div class="heading">可能感兴趣的课程</div>
							<ul id="IntrestCourses">
								<!--<li>
									<a href="#" class="d-flex">
										<figure class="image mr-3">
											<img src="images/img_2_b.jpg" alt="" class="img-fluid">
										</figure>
										<div class="text">
											<h3 class="heading">Create cool websites using this template</h3>
											<span class="meta">$34</span>
										</div>
									</a>
								</li>-->
							</ul>
						</div>

						<!--<div class="block-24 mb-5">
							<h3 class="heading">Categories</h3>
							<ul>
								<li>
									<a href="#">Laravel <span>10</span></a>
								</li>
								<li>
									<a href="#">PHP <span>43</span></a>
								</li>
								<li>
									<a href="#">JavaScript <span>21</span></a>
								</li>
								<li>
									<a href="#">Python <span>65</span></a>
								</li>
								<li>
									<a href="#">iOS <span>34</span></a>
								</li>
								<li>
									<a href="#">Android <span>45</span></a>
								</li>
								<li>
									<a href="#">Swift <span>22</span></a>
								</li>
							</ul>
						</div>-->

					</div>
					<!-- END Sidebar -->
				</div>
			</div>
		</div>

		<!--<div class="site-section bg-light">
			<div class="container">
				<div class="row justify-content-center mb-5 element-animate">
					<div class="col-md-7 text-left section-heading">
						<h2 class="text-primary heading">You May Also Like</h2>
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit qui neque sint eveniet tempore sapiente.</p>
					</div>
				</div>
			</div>
			<div class="container-fluid block-11 element-animate">
				<div class="nonloop-block-11 owl-carousel">
					<div class="item">
						<div class="block-19">
							<figure>
								<img src="images/img_1.jpg" alt="Image" class="img-fluid">
							</figure>
							<div class="text">
								<h2 class="heading"><a href="#">Advanced JavaScript Learning</a></h2>
								<p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit qui neque sint eveniet tempore sapiente.</p>
								<div class="meta d-flex align-items-center">
									<div class="number">
										<span>2,219/6,000</span>
									</div>
									<div class="price text-right"><del class="mr-3">$23</del><span>Free</span></div>
								</div>
							</div>
						</div>
					</div>

					<div class="item">
						<div class="block-19">
							<figure>
								<img src="images/img_3.jpg" alt="Image" class="img-fluid">
							</figure>
							<div class="text">
								<h2 class="heading"><a href="#">Advanced JavaScript Learning</a></h2>
								<p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit qui neque sint eveniet tempore sapiente.</p>
								<div class="meta d-flex align-items-center">
									<div class="number">
										<span>2,219/6,000</span>
									</div>
									<div class="price text-right"><del class="mr-3">$23</del><span>Free</span></div>
								</div>
							</div>
						</div>
					</div>

					<div class="item">
						<div class="block-19">
							<figure>
								<img src="images/img_2.jpg" alt="Image" class="img-fluid">
							</figure>
							<div class="text">
								<h2 class="heading"><a href="#">Introduction to CSS</a></h2>
								<p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit qui neque sint eveniet tempore sapiente.</p>
								<div class="meta d-flex align-items-center">
									<div class="number">
										<span>1,903/3,000</span>
									</div>
									<div class="price text-right"><span>$10.99</span></div>
								</div>
							</div>
						</div>
					</div>

					<div class="item">
						<div class="block-19">
							<figure>
								<img src="images/img_1.jpg" alt="Image" class="img-fluid">
							</figure>
							<div class="text">
								<h2 class="heading"><a href="#">Design &amp; Develop</a></h2>
								<p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit qui neque sint eveniet tempore sapiente.</p>
								<div class="meta d-flex align-items-center">
									<div class="number">
										<span>23/100</span>
									</div>
									<div class="price text-right"><del class="mr-3">$23</del><span>Free</span></div>
								</div>
							</div>
						</div>
					</div>

					<div class="item">
						<div class="block-19">
							<figure>
								<img src="images/img_1.jpg" alt="Image" class="img-fluid">
							</figure>
							<div class="text">
								<h2 class="heading"><a href="#">Advanced JavaScript Learning</a></h2>
								<p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit qui neque sint eveniet tempore sapiente.</p>
								<div class="meta d-flex align-items-center">
									<div class="number">
										<span>2,219/6,000</span>
									</div>
									<div class="price text-right"><del class="mr-3">$23</del><span>Free</span></div>
								</div>
							</div>
						</div>
					</div>

					<div class="item">
						<div class="block-19">
							<figure>
								<img src="images/img_3.jpg" alt="Image" class="img-fluid">
							</figure>
							<div class="text">
								<h2 class="heading"><a href="#">Advanced JavaScript Learning</a></h2>
								<p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit qui neque sint eveniet tempore sapiente.</p>
								<div class="meta d-flex align-items-center">
									<div class="number">
										<span>2,219/6,000</span>
									</div>
									<div class="price text-right"><del class="mr-3">$23</del><span>Free</span></div>
								</div>
							</div>
						</div>
					</div>

					<div class="item">
						<div class="block-19">
							<figure>
								<img src="images/img_2.jpg" alt="Image" class="img-fluid">
							</figure>
							<div class="text">
								<h2 class="heading"><a href="#">Introduction to CSS</a></h2>
								<p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit qui neque sint eveniet tempore sapiente.</p>
								<div class="meta d-flex align-items-center">
									<div class="number">
										<span>1,903/3,000</span>
									</div>
									<div class="price text-right"><span>$10.99</span></div>
								</div>
							</div>
						</div>
					</div>

					<div class="item">
						<div class="block-19">
							<figure>
								<img src="images/img_1.jpg" alt="Image" class="img-fluid">
							</figure>
							<div class="text">
								<h2 class="heading"><a href="#">Design &amp; Develop</a></h2>
								<p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit qui neque sint eveniet tempore sapiente.</p>
								<div class="meta d-flex align-items-center">
									<div class="number">
										<span>23/100</span>
									</div>
									<div class="price text-right"><del class="mr-3">$23</del><span>Free</span></div>
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>

		</div>-->
		<!-- END section -->

		<footer class="site-footer">
			<div class="container">
				<div class="row mb-5">
					<div class="col-md-6 col-lg-3 mb-5 mb-lg-0">
						<h3>爱学习</h3>
						<p></p>
					</div>
					<div class="col-md-6 col-lg-3 mb-5 mb-lg-0">
						<h3 class="heading">快速链接</h3>
						<div class="row">
							<div class="col-md-6">
								<ul class="list-unstyled">
									<li>
										<a href="index2.jsp">首页</a>
									</li>
									<li>
										<a href="about.jsp">关于我们</a>
									</li>
									<li>
										<a href="courses.jsp">培训班</a>
									</li>

								</ul>
							</div>

						</div>
					</div>

					<div class="col-md-6 col-lg-3 mb-5 mb-lg-0">
						<h3 class="heading">联系信息</h3>
						<div class="block-23">
							<ul>
								<li><span class="icon ion-android-pin"></span><span class="text">大连爱学习总部</span></li>
								<li><span class="icon ion-ios-telephone"></span><span class="text">+2 392 3929 210</span></li>
								<li><span class="icon ion-android-mail"></span><span class="text">865681467@qq.com</span></li>
								<li><span class="icon ion-android-time"></span><span class="text">星期一 &mdash; 星期五 8:00am - 5:00pm</span></li>
							</ul>
						</div>
					</div>
				</div>

			</div>
		</footer>
		<!-- END footer -->

		<!-- loader -->
		<div id="loader" class="show fullscreen">
			<svg class="circular" width="48px" height="48px">
				<circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee" />
				<circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#f4b214" />
			</svg>
		</div>

		<div class="modal fade" id="buyCourseModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="exampleModalLabel">购买课程</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
					</div>
					<div class="modal-body">
						...
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" id="cmtPurchase" onclick="doPurchase(this)">确认</button>
					</div>
				</div>
			</div>
		</div>

		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="js/jquery-migrate-3.0.0.js"></script>
		<script src="js/popper.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/owl.carousel.min.js"></script>
		<script src="js/jquery.waypoints.min.js"></script>
		<script src="js/jquery.stellar.min.js"></script>
		<script src="js/jquery.animateNumber.min.js"></script>
		<script src="../WebTools/DB/comments.js" type="text/javascript" charset="utf-8"></script>
		<script src="../WebTools/wangEditor-3.1.1/release/wangEditor.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/main.js"></script>
		<script src="${pageContext.request.contextPath}/front/js/layer/layer.js"></script>
		<script src="../WebTools/DB/tools.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var NowAccountId = '${sessionScope.accountId}';
			$(function() {
				intiCoursePage();
				//发送TabAjax请求
				$.ajax({
					async: true,
					url: "${pageContext.request.contextPath}/TabServlet",
					type: "GET",
					data: {
						op: "getAllTab"
					},
					dataType: "json",
					success: function(result, status, xhr) {
						//清空数据
						$('#tabdiv').empty();
						$.each(result, function(index, tab) {
							if(index < 3) {
								$('#tabdiv').append("<a class=\"dropdown-item\" href=\"courses.jsp?searchKey=" + escape(tab.tab_name) + "\">" + tab.tab_name + "</a>");
							}
						});
					},
					error: function(xhr, status, error) {
						layer.msg("请求失败");
					}
				});
			})

			var vid = document.querySelector('#playingVideo');
			/**
			 * 播放视频逻辑判断
			 */
			vid.addEventListener('play', function() {
				if(NowAccountId != '') {
					$.ajax({
						type: "post",
						url: "../OrderServlet",
						data: {
							'op': 'isBought',
							'accountId': NowAccountId,
							'courseId': getQueryString('courseId')
						},
						success: function(data) {
							if(data == 'false') {
								vid.pause();
								layer.msg("您尚未购买该课程");
							}
						},
						error: function() {
							vid.pause();
							layer.msg("出错了");
						}
					});
				} else {
					vid.pause();
					layer.msg("请先登录！");

				}
			});
			/**
			 * 加载整个页面
			 */
			function intiCoursePage() {
				if(getQueryString('courseId') != null) {
					//加载课程相关信息
					loadCourseInfo();
					//加载评论区
					loadCommentsGtoup();
					//加载视频列表
					loadLessonsInfo(1);

				}
				//判断登录
				accountLogined();

			}

			/**
			 * 感兴趣课程容器请求
			 */
			function loadIntrestingCourse() {
				var keys = [];
				$('#tabList li a').each(function() {
					keys.push($(this).text())
				})
				$.ajax({
					type: "post",
					url: "../CourseServletForyd",
					async: true,
					dataType: 'json',
					traditional: true,
					data: {
						'op': 'getIntrestedCourse',
						'keyWords': keys
					},
					success: function(data) {
						fillIntrestCoursePanel(data);
					},
					error: function() {
						layer.msg("出错了");
					}
				});

			}

			function fillIntrestCoursePanel(data) {
				$('#IntrestCourses').empty();
				var x = "";
				//				alert("sss")
				//				console.log(data)
				$.each(data, function() {
					if(this.course_pic == null) {
						this.course_pic = 'indexCoursePic.jpg';
					}
					x += '<li>';
					x += '<a href="${pageContext.request.contextPath}/CourseServletForyd?op=toSingleCoursePage&courseId=' + this.course_id + '" class="d-flex">';
					x += '<figure class="image mr-3">';
					x += '<img src="${pageContext.request.contextPath}/FileDownLoadServlet?op=getCourseFace&faceName=' + this.course_pic + '" alt="' + this.course_title + '" class="img-fluid">';
					x += '	</figure>';
					x += '<div class="text">';
					x += '<h3 class="heading">' + this.course_title + '</h3>';
					x += '<span class="meta">$' + this.course_price + '</span>';
					x += '</div>';
					x += '</a>';
					x += '</li>';
				});
				$('#IntrestCourses').append(x);
			}
			$(document).on("click", "#leftbtn", function() {
				//获取当前页
				var currentPageNum = $('#pageul').data("pagenum");
				if(currentPageNum == 1) {
					layer.msg("已经是第一页", {
						icon: 0
					});
				} else {
					var pageNum = parseInt(currentPageNum) - 1;
					loadLessonsInfo(pageNum);
				}
			});
			/**
			 * 向后翻页事件
			 */
			$(document).on("click", "#rigbtn", function() {
				//获取当前页
				var currentPageNum = $('#pageul').data("pagenum");
				//获取总页数
				var lastPageNum = $('#pageul').data("pages");
				if(currentPageNum == lastPageNum) {
					layer.msg("已经是最后一页");
				} else {
					var pageNum = parseInt(currentPageNum) + 1;
					loadLessonsInfo(pageNum);
				}
			});
			/**
			 * 向前翻页事件
			 */
			$(document).on("click", ".current", function() {
				//获取当前页
				var pageNum = $(this).text();

				loadLessonsInfo(pageNum);

			});
			/**
			 * 获取课程包含视频信息
			 */
			function loadLessonsInfo(pageNum) {
				$.ajax({
					type: "post",
					url: "../VideoServlet",
					data: {
						'op': 'getVideosByCourseId',
						'courseId': getQueryString('courseId'),
						'pageSize': 5,
						'pageNum': pageNum,
						'orderBy': 'video_title',
					},
					dataType: 'json',
					success: function(data) {
						if(data.data.length != 0) {
							loadLessonsPanel(data);
						}

					},
					error: function() {
						layer.msg("出错了");
					}
				});
			}

			/**加载页码切换
			 * @param {Object} data
			 */
			function loadChangePanel(data) {
				$('#showPage').empty();
				//<符号显示
				var x = '<ul data-pagenum="' + data.pageNum + '" data-pages="' + data.pages + '" id="pageul">' +
					'<li><a href="javascript:void(0)" class="m-1" id="leftbtn">&lt;</a></li>';
				//页码显示
				for(var i = 1; i <= data.pages; i++) {
					if(i == data.pageNum) {
						x += '<li class="active current" ><a class="m-1" href="javascript:void(0)">' + i + '</a></li>';

					} else {
						x += '<li class="current"><a class="m-1" href="javascript:void(0)">' + i + '</a></li>';

					}
				}
				x += '<li><a href="javascript:void(0)" class="m-1" id="rigbtn">&gt;</a></li></ul>';

				//>符号显示
				$('#showPage').append(x);
			}

			/**
			 * 加载评论区
			 */
			function loadCommentsGtoup() {
				$('.e-comment-group').data('id-comment-group', getQueryString('courseId'));
				$('.e-comment-group').data('id-account', '${sessionScope.accountId}');
				startTobuildEntireCommentGroup();
			}

			/**加载课程视频列表容器
			 * @param {Object} data
			 */
			function loadLessonsPanel(data) {
				//判断课程中是否有视频，没有则不加载video
				if(data.data.length != 0) {
					$('#videoTitle').text('《' + data.data[0].video_title + '》')
					$('video source').attr('src', '/LoveStudying/FileDownLoadServlet?op=getVideo&courseId=' + getQueryString('courseId') + '&videoURL=' + data.data[0].video_address);
					document.getElementById("playingVideo").load();
				}
				$('#lessonsPanel').html('');
				var i = 0;
				$.each(data.data, function() {
					if(i % 2 == 0) {
						var x = '<div class="row bg-light align-items-center p-4 episode">';
					} else {
						var x = '<div class="row align-items-center p-4 episode">';
					}
					x += '<div class="col-md-10">';
					x += '<h2><a href="#" data-videoId="' + this.video_id + '" data-video-title="' + this.video_title + '"  data-video-addr="' + this.video_address + '" onclick="loadVideo(this)">' + this.video_title + '</a></h2>';
					x += '</div>';
					x += '<div class="col-md-2 text-center">';
					x += '	<a href="#" data-videoId="' + this.video_id + '" data-video-title="' + this.video_title + '" data-video-addr="' + this.video_address + '" onclick="loadVideo(this)" class="play"><span class="ion-ios-play"></span></a>';
					x += '</div>';
					x += '</div>';
					$('#lessonsPanel').append(x);
					i++;
				});
				loadChangePanel(data);
			}

			function loadVideo(obj) {

				$('#videoTitle').text('《' + $(obj).data('video-title') + '》')
				$('video source').attr('src', '/LoveStudying/FileDownLoadServlet?op=getVideo&courseId=' + getQueryString('courseId') + '&videoURL=' + $(obj).data('video-addr'))
				document.getElementById("playingVideo").load();
			}
			/**
			 * 加载教师信息
			 */
			function loadTeacherInfoPanel(data) {
				$('#teacherInfoPanel').html('');
				var x = '<h2 class="heading mb-3">任课老师</h2>';
				x += '<figure>';
				if(data.teacher_pic != null && data.teacher_pic.trim() != '') {
					x += '<img src="${pageContext.request.contextPath}/FileDownLoadServlet?op=getAccountFace&faceName=' + data.teacher_pic + '" alt="' + data.teacher_name + '" class="img-fluid">';
				} else {
					x += '<img src="images/person_3.jpg" alt="" class="img-fluid">';
				}
				x += '	</figure>';
				if(data.teacher_name != null) {
					x += '<h2 class="heading">' + data.teacher_name + '</h2>';
				} else {
					x += '<h2 class="heading">佚名</h2>';
				}
				x += '<p>';
				x += '<a href="#" class="fa fa-weibo p-2"></a>';
				x += '<a href="#" class="fa fa-instagram p-2"></a>';
				x += '<a href="#" class="fa fa-twitter p-2"></a>';
				x += '</p>';
				if(data.teacher_preview != null) {
					x += '<p>' + data.teacher_preview + '</p>';
				} else {
					x += '<p>暂无简介</p>';
				}

				$('#teacherInfoPanel').append(x);
			}
			/**
			 * 判断是否登录处理导航栏
			 */
			function accountLogined() {
				$('#pageBody').css('margin-top', $('header').height());
				if("${sessionScope.name}" != "" && "${sessionScope.accountPic}" != "") {
					$("#status1 img").attr('src', '${pageContext.request.contextPath}/FileDownLoadServlet?op=getAccountFace&faceName=${sessionScope.accountPic}');
					$("#status2").hide()
					$('#PersonalCenter').prop("src", "PersonalCenter.jsp");
				} else if("${sessionScope.name}" != "" && "${sessionScope.accountPic}" == "") {
					$("#status2").hide();
					$('#PersonalCenter').prop("src", "PersonalCenter.jsp");
				} else if("${sessionScope.name}" == "") {
					$("#status1").hide()
					$("#home").removeAttr('onclick')
				}
			}

			/**
			 * 加载具有课程信息的容器
			 */
			function loadCourseInfo() {
				$.ajax({
					type: "post",
					url: "../CourseServletForyd",
					data: {
						'op': 'getCourseInfoById',
						'courseId': getQueryString('courseId')
					},
					dataType: 'json',
					success: function(data) {
						if(data.Tab_list != null && data.Tab_list.length != 0) {
							loadTabPanel(data.Tab_list);
						}
						loadcoursePanel(data);
						loadcourseIntroduPanel(data);
						if(data.teacher.teacher_name != null && data.teacher.teacher_id != null) {
							loadTeacherInfoPanel(data.teacher);
						}
						//添加最近访问列表
						if(localStorage.getItem('recentVisit') == null) {
							var a = [];
							a.push(data)
							localStorage.setItem('recentVisit', JSON.stringify(a));
						} else {
							var a = JSON.parse(localStorage.getItem('recentVisit'));
							$.each(a, function(index) {
								if(this.course_id == data.course_id) {
									a.splice(index, 1);
								}
							});
							a.splice(0, 0, data);
							localStorage.setItem('recentVisit', JSON.stringify(a))
							//							b.push(a);
							//							b.push(JSON.stringify(data))
							//							a.push(JSON.stringify(data));
							//							console.log(b);

							//							sessionStorage.setItem(sessionStorage.getItem('recentVisit'), JSON.stringify(data))

						}
						//						sessionStorage.setItem(data.course_id, JSON.stringify(data))
					},
					error: function() {
						layer.msg("出错了");
					}
				});

			}

			/**加载课程标题
			 * @param {Object} data
			 */
			function loadcoursePanel(dataa) {
				$.ajax({
					type: "post",
					url: "../OrderServlet",
					async: true,
					data: {
						'op': 'isBought',
						courseId: getQueryString('courseId'),
						accountId: '${sessionScope.accountId}'
					},
					success: function(data) {
						if(data == 'true') {
							$('#courseTitlePanel').html('<h2 class="heading display-4" id="courseTitle">' + dataa.course_title + '</h2><button class="btn btn-success text-white" disabled="disabled">已购买</button>');
						} else {
							$('#courseTitlePanel').html('<h2 class="heading display-4" id="courseTitle">' + dataa.course_title + '</h2><button data-course-price="' + dataa.course_price + '" data-toggle="modal" data-target="#buyCourseModal" data-course-title="' + dataa.course_title + '" onclick="buyCourse(this)" class="btn btn-info text-white">' + dataa.course_price + '积分</button>');
						}
					},
					error: function() {
						layer.msg('出错了');

					}
				});
				//				$('#courseTitlePanel').html('<h2 class="heading display-4" id="courseTitle">' + data.course_title + '</h2><span><a href="#" class="btn btn-success text-white">课程</a></span>')
				//				$('#courseTitlePanel').parent().after('<button class="btn btn-primery">课程</button>')
			}
			/**购买程序
			 * @param {Object} obj
			 */
			function doPurchase(obj) {
				//				$(obj).data('course-price');

				if('${sessionScope.accountId}'.trim() != '') {
					$.ajax({
						type: "post",
						url: "../OrderServlet",
						data: {
							'op': 'doPurchase',
							'accountId': '${sessionScope.accountId}',
							'courseId': $(obj).data('course-id'),
							'coursePrice': $(obj).data('course-price')
						},
						success: function(data) {
							if(data == 0) {
								layer.msg('您的积分不足！');
								$('#buyCourseModal').modal('hide');
							} else if(data == 1) {
								layer.msg('购买成功！');
								sendIsBoughtAjax('${sessionScope.accountId}');
								$('#buyCourseModal').modal('hide');
							} else {
								layer.msg(data);
								$('#buyCourseModal').modal('hide');
							}

						},
						error: function() {
							layer.msg("请求失败");
						}
					});
				} else {
					layer.msg('请先登录')
				}

			}
			/**加载模态框
			 * @param {Object} obj
			 */
			function buyCourse(obj) {
				$('#buyCourseModal .modal-body').empty();
				$('#buyCourseModal .modal-body').append('<h3>确认购买【' + $(obj).data('course-title') + '】吗</h3>');
				$('#buyCourseModal .modal-body').append('<h3>这将花费你' + $(obj).data('course-price') + '积分</h3>')
				$('#cmtPurchase').data('course-price', $(obj).data('course-price'));
				$('#cmtPurchase').data('course-id', $(obj).data('course-id'));
			}
			/**加载课程简介
			 * @param {Object} data
			 */
			function loadcourseIntroduPanel(data) {
				$('#courseIntrodu').html('');
				if(data.course_introdu == null) {
					data.course_introdu = '暂无简介';
				}
				var x = '<h2>' + data.course_title + '-简介</h2>';
				x += data.course_introdu;
				$('#courseIntrodu').append(x);
				$('title').text('课程-' + data.course_title);
			}
			/**加载课程标签容器元素
			 * @param {Object} data
			 */
			function loadTabPanel(data) {
				$('#tabList').html('');
				var x = '';
				$.each(data, function() {
					x += '<li><a target="_blank" href="${pageContext.request.contextPath}/front/courses.jsp?searchKey=' + escape(this.tab_name) + '">' + this.tab_name + '</a></li>';
				});
				$('#tabList').append(x);
				loadIntrestingCourse();
			}
		</script>
	</body>

</html>